<template>
  <view class="message-list">
    <view class="page-title">问诊消息记录</view>
    
    <!-- 消息列表 -->
    <view 
      v-for="(item, index) in messages" 
      :key="item.id || index" 
      class="message-item"
	  @click="gochat"
    >
      <!-- 头像 -->
      <image :src="item.avatar" mode="aspectFill" class="avatar"></image>
      
      <!-- 中间内容区 -->
      <view class="content">
        <view class="top-row">
          <text class="name">{{ item.name }}</text>
          <!-- 身份标签 -->
          <text 
            :class="['tag', {
              'tag-doctor': item.title !== '患者',
              'tag-patient': item.title === '患者'
            }]"
          >{{ item.title }}</text>
        </view>
        <text class="preview">{{ item.preview }}</text>
      </view>
      
      <!-- 右侧时间和未读标记 -->
      <view class="right-column">
        <text class="time">{{ item.time }}</text>
        <!-- 未读标记（仅医生身份且未读数量>0时显示） -->
        <view 
          v-if="item.title !== '患者' && item.unread > 0" 
          class="unread-badge"
        >{{ item.unread }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 消息项类型定义
interface MessageItem {
  id?: number
  avatar: string
  name: string
  title: string
  preview: string
  time: string
  unread: number
}

// 消息数据
const messages = ref<MessageItem[]>([
  {
    avatar: '/static/doctor.png',
    name: '医生姓名',
    title: '主任医师',
    preview: '消息消息消息预览...',
    time: '10:20',
    unread: 1
  },
  {
    avatar: '/static/doctor.png',
    name: '医生姓名',
    title: '主治医师',
    preview: '消息消息消息预览...',
    time: '10:20',
    unread: 3
  },
  {
    avatar: '/static/doctor.png',
    name: '医生姓名',
    title: '专家',
    preview: '消息消息消息预览...',
    time: '10:20',
    unread: 0
  },
  {
    avatar: '/static/doctor.png',
    name: '患者姓名',
    title: '患者',
    preview: '消息消息消息预览...',
    time: '10:20',
    unread: 0
  }
])

const gochat=()=>{
		uni.navigateTo({
			url:'/pages/chat/chat'
		})
	}
</script>

<style scoped>
/* 列表容器 */
.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
}

.message-list {
  background-color: #e1e1e1;
  height: 100vh;
  padding: 32rpx;
  padding-top: 110rpx;
  box-sizing: border-box;
}

/* 列表项 */
.message-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

/* 头像样式 */
.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}

/* 中间内容区 */
.content {
  flex: 1;
}

.top-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

/* 姓名样式 */
.name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-right: 16rpx;
}

/* 身份标签通用样式 */
.tag {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #fff;
}

/* 医生标签（蓝色） */
.tag-doctor {
  background-color: #578eff;
}

/* 患者标签（橙色） */
.tag-patient {
  background-color: #ff985f;
}

/* 消息预览 */
.preview {
  font-size: 28rpx;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧列（时间+未读标记） */
.right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 时间样式 */
.time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
}

/* 未读标记 */
.unread-badge {
  width: 48rpx;
  height: 48rpx;
  background: #28c76f;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}
</style>